<template>
	<view>
		<!-- 商品分类 -->
		<swiper v-if="swiperMore" @change="change" style="height: 400rpx">
			<swiper-item class="sort" v-for="(row,index) in categoryList" :key="index">
				<u-grid :col="5" :border="false">
					<u-grid-item class="u-grid-item" v-for="(col,idx) in row" :key="idx" @click="showAllProducts(col.id)">
						<image class="badge-icon" :src="col.img" mode=""></image>
						<view class="grid-text">{{col.name}}</view>
					</u-grid-item>
				</u-grid>
			</swiper-item>
		</swiper>
		<view class="sort" v-else>
			<u-grid :col="5" :border="false">
				<u-grid-item class="u-grid-item" v-for="(item,index) in categoryList" :key="index" @click="showAllProducts(item.id)">
					<image class="badge-icon" :src="item.img" mode=""></image>
					<view class="grid-text">{{item.name}}</view>
				</u-grid-item>
			</u-grid>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'category-list',
		props: {
			gridList: {
				type: Array,
				default: function() {
					return []
				}
			}
		},
		data() {
			return {
				categoryList: [],
				colCategoryList: [],
				swiperCategoryList: [],
				more: {
					img: 'https://gw.alicdn.com/tfs/TB12CFXSFXXXXcpapXXXXXXXXXX-146-147.png_110x10000.jpg',
					name: '更多',
					id: -1
				},
				openMore: false,
				swiperMore: false,
				length: 0
			}
		},
		methods: {
			showAllProducts(id) {
				if (id === -1) {
					this.categoryList = [];
					if (this.openMore === false) {
						if (this.length < 10) {
							this.categoryList = this.gridList;
						} else {
							this.categoryList = this.swiperCategoryList;
							this.swiperMore = true;
						}
						this.openMore = true;
					} else {
						this.categoryList = this.colCategoryList;
						this.openMore = false;
						this.swiperMore = false;
					}
					return;
				}
				uni.navigateTo({
					url: '/pages/product/product'
				});
			},
			setCategoryList() {
				if (this.length <= 5) {
					this.categoryList = this.gridList;
				} else if (this.length > 5 && this.length < 10) {
					this.gridList.splice(4, 0, this.more);
					for (let x = 0; x < 5; x++) {
						this.colCategoryList.push(this.gridList[x])
					}
				} else {
					this.gridList.splice(4, 0, this.more)
					for (let x = 0; x < 5; x++) {
						this.colCategoryList.push(this.gridList[x])
					}
					this.swiperCategoryList = this.group(this.gridList);
				}
				this.categoryList = this.colCategoryList;
			},
			group(array) {
				let index = 0;
				let newArray = [];
				while (index < array.length) {
					newArray.push(array.slice(index, index += 10));
				}
				return newArray;
			}
		},
		onReady() {
			this.length = this.gridList.length;
			this.$nextTick(function(){
				this.setCategoryList();
			})
		}
	}
</script>

<style lang="scss">
	.sort {
		width: 100%;
		height: 100%;
		background-color: #fff;


		.u-grid-item-box {
			padding: 20rpx 0;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			display: flex;
			width: 100%;
			height: 100%;
			border-radius: 12rpx;

		}

		.badge-icon {
			width: 88rpx;
			height: 88rpx;
		}

		.grid-text {
			font-size: 22rpx;
			font-family: PingFang;
			font-weight: 500;
			color: rgba(41, 41, 41, 1);
			margin-top: 22rpx;
		}
	}
</style>
